{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'basic_app/tag_left_user.html' %}
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">本系统用户的管理页</h2>
        <div class="table-responsive">
            {#            <form class="navbar-form navbar-left" action="/basic_app/user_search"  role="search" method="post">#}
            <form class="navbar-form navbar-left" role="search">

                {#                <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"  aria-hidden="true" ></span><a href="/basic_app/user_add"> 添加用户</a></button>#}
                <div class="form-group">
                    <input type="text" name="user_search" class="form-control aa_search" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default"  id="aa_search"
                        aa_search="{{ search }}"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 搜索
                </button>
                <button type="button" class="btn btn-primary" onclick="add()"><span
                        class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加用户
                </button>

            </form>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>手机号</th>
                    <th>部门</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tabbody">
                {#                {%   for i in userinfo_result %}#}
                {% for i in current_page %}
                    <tr>
                        {#                        <td><input type="checkbox"/></td>#}
                        <td style="display:none">{{ i.id }}</td>
                        <td>{{ i.username }}</td>
                        <td>{{ i.email }}</td>
                        <td>{{ i.iphone }}</td>
                        <td>{{ i.dept }}</td>
                        <td>{{ i.status }}</td>
                        <td><a  style="cursor:pointer"  onclick="edit({{ i.id }})">编辑</a> | <a style="cursor:pointer"
                                href="/basic_app/user_delete?nid={{ i.id }}"
                                onclick="if(confirm('确认删除吗？')==false)return false;">删除</a> | <a style="cursor:pointer"
                                href="/basic_app/user_lock?nid={{ i.id }}">锁定</a> | <a style="cursor:pointer"
                                href="/basic_app/user_more?nid={{ i.id }}">查看详情</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {#        以下是分页#}
            {% include 'basic_app/paginator.html' %}
            {#        以上是分页#}
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="docModalContent" style="width:600px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel" onsubmit="return validateForm()">添加用户信息</h4>
                </div>
                <span>&nbsp</span>
                <form class="form-horizontal" action="/basic_app/user_add_edit" method="post" style="padding-left: 10% "
                      onsubmit="return validateForm()" id="editForm">
                    <div class="form-group" style="display: none">
                        <label class="col-sm-2 control-label">id：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_id"
                                   placeholder="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名：</label>
                        <div class="col-sm-10">
                            <input id="onsubmit_username" style="width:300px;" type="text" class="form-control"
                                   name="add_user" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码：</label>
                        <div class="col-sm-10">
                            <input id="onsubmit_passwd" type="password" style="width:300px;" class="form-control"
                                   name="add_pwd"placeholder="格式要求:6-20位,数字+字母组合">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Email：</label>
                        <div class="col-sm-10">
                            <input id="onsubmit_email" style="width:300px;" type="email" class="form-control" name="add_email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">手机号：</label>
                        <div class="col-sm-10">
                            <input id="onsubmit_phone" style="width:300px;" type="text" class="form-control"
                                   name="add_phone" placeholder="手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">status：</label>
                        <div class="col-sm-10">
                            <select class="form-control" style="width:300px;" name="add_status">
                                <option>ACTIVE</option>
                                <option>LOCKED</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">dept：</label>
                        <div class="col-sm-10">
                            <select class="form-control" style="width:300px;" name="add_dept">
                                <option>DBA</option>
                                <option>DEV</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
{% endblock %}
{% block script %}
    <script>

        //添加用户信息时，验证
        function validateForm() {
            var phone_reg = /^1[3|4|5|7|8]\d{9}$/;
            var memberPass = /^[a-zA-Z0-9_]{6,20}$/;
            var numPass = /^[0-9]+$/;
            var dPass = /^[a-zA-Z]+$/
            var username = document.getElementById("onsubmit_username");
            var password = document.getElementById("onsubmit_passwd");
            var phone = document.getElementById("onsubmit_phone");
            if (username.value == '' || username.value == null) {
                alert("请输入用户名");
                return false;
            }
            if (password.value == '' || password.value == null) {
                alert("请输入密码");
                password.focus();
                return false;
            }
            if (!memberPass.test(password.value)) {
                alert("密码格式不正确、格式要求:6-20位,数字+字母组合");
                password.focus();
                return false;
            }
            if (numPass.test(password.value)) {
                alert("密码格式不正确、密码不能为纯数字");
                password.focus();
                return false;
            }
            if (dPass.test(password.value)) {
                alert("密码格式不正确、密码不能为纯字母");
                password.focus();
                return false;
            }
            if (phone.value == '' || phone.value == null || !phone_reg.test(phone.value)) {
                alert("请输入正确的手机号");
                password.focus();
                return false;
            }
            return true;
        }



         //当添加表单时
        function add() {
            //首先清空表单数据
            $("#editForm input").val('');
            //调用模态框
            $('#myModal').modal('show')
        }

        //当编辑表单时回传数据
        function edit(id) {
            var url = "/basic_app/user_add_edit?nid=" + id;
            $.ajax({
                url: url,
                type: "get",
                dataType: "json",
                success: function (res) {
                    $("input[name='add_id']").val(res.id);
                    $("input[name='add_user']").val(res.username);
                    $("input[name='add_pwd']").val(res.password);
                    $("input[name='add_email']").val(res.email);
                    $("input[name='add_phone']").val(res.iphone);
                    $("select[name='add_status']").val(res.status);
                    $("select[name='add_dept']").val(res.dept);
                }
            })
            //调用模态框
            $('#myModal').modal('show')
        }

        $(document).ready(function () {
            $('#tabbody tr').each(function (i) {
                $(this).children('td').each(function (j) {
                    if (j == 5) {
                        console.log($(this).text())
                        if ($(this).text() == 'LOCKED') {
                            $(this).css('color', 'red')
                        }
                        if ($(this).text() == 'ACTIVE') {
                            $(this).css('color', 'green')
                        }
                    }
                });
            })
        })
    </script>
{% endblock %}